<template>
  <div class="task-detail-box">
    <div class="task-detail-project">
      <div class="task-detail-project-title">
        <img src="@/assets/img/specialHome/项目.png" alt="">
        <span>{{ projectTitle }}</span>
      </div>
      <div class="task-detail-project-info">
        <div v-for="(item,index) in leftCardList" :key="index" class="task-detail-project-info-item">
          <span class="task-detail-project-info-item-label">{{ item.title }}:&nbsp;&nbsp;</span>
          <span class="task-detail-project-info-item-value">{{ item.num }}</span>
        </div>
      </div>
    </div>
    <div v-if="renderData.length" class="task-detail-info">
      <div class="task-detail-info-top">
        <div class="task-detail-info-top-left">
          <div v-for="(item,index) in renderData" :key="index" class="task-detail-info-top-left-item">
            <!-- <img :src="item.url" alt=""> -->
            <span class="task-detail-info-top-left-item-label">{{ item.title }}:</span>
            <span class="task-detail-info-top-left-item-value">{{ item.myValue }}</span>
          </div>
        </div>
      </div>
      <div class="task-detail-info-player">
        <div class="task-detail-info-player-title">
          <!-- <img :src="player" alt=""> -->
          <span>参与人:</span>
        </div>
        <div class="task-detail-info-player-headimg">
          {{ usersInfo.map(u => u.true_name).toString() }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 任务详情
export default {
  name: 'TaskDetails',
  props: {
    leftCardList: {
      type: Array,
      default: () => ([])
    },
    usersInfo: {
      type: Array,
      default: () => ([])
    },
    projectTitle: {
      type: String,
      default: ''
    },
    renderData: {
      type: Array,
      default: () => ([])
    }
  },
  data() {
    return {
      // projectIcon: require('@/assets/images/taskPage/projectIcon.png'),
      // player: require('@/assets/images/taskPage/task4.png')
    };
  },
  methods: {
    handleClose(done) {
      this.$emit('closeTaskDetail');
    }
  }
};
</script>

<style lang="scss" scoped>
.task-detail-box{
  .task-detail-project{
    background-color: #edf4ff;
    padding: 20px;
    .task-detail-project-title{
      display: flex;
      align-items: center;
      span{
        padding-left: 10px;
        font-size: 18px;
        color: #1492ff;
      }
    }
    .task-detail-project-info{
      padding-top: 20px;
      display: flex;
      flex-wrap: wrap;
      .task-detail-project-info-item{
        padding: 2px 0;
        width: 25%;
        font-weight: 400;
        font-size: 16px;
        .task-detail-project-info-item-label{
          color: #999999;
        }
        .task-detail-project-info-item-value{
          color: #333333;
        }
      }
    }

  }
  .task-detail-info{
    margin-top: 20px;
    background-color: #edf4ff;
    padding: 20px;
    .task-detail-info-top{
      display: flex;
      .task-detail-info-top-left{
        flex: 1;
        display: flex;
        flex-wrap: wrap;
        .task-detail-info-top-left-item{
          width: 50%;
          display: flex;
          align-items: flex-start;
          padding: 4px 0;
          font-size: 16px;
          text-align: left;
          .task-detail-info-top-left-item-label{
            color: #303133;
            padding: 0 5px;
          }
          .task-detail-info-top-left-item-value{
            color: #606266;
            flex: 1;
          }
        }
      }
      .task-detail-info-top-right{
        flex: 2;
        font-size: 16px;
        font-weight: 400;
        .task-detail-info-top-right-title{
          display: flex;
          align-items: center;
          span{
            padding: 0 5px;
          }
        }
        .task-detail-info-top-right-value{
          color: #606266;
        }
      }
    }
    .task-detail-info-player{
      display: flex;
      .task-detail-info-player-title{
        display: flex;
        align-items: center;
        span{
          padding: 0 5px;
        }
      }
      .task-detail-info-player-headimg{
        flex: 1;
      }
    }
  }
}
</style>
